<template>
  <Layout>
    <PageHeaderNew :items="items" />
    <div class="card newstyle">
      <div class="card-body">
        <div class="all-products">采集站点管理</div>
        <div class="row col-md-12">
          <div class="col-md-4">
            <div class="form-group row">
              <label class="col-md-3 padding-right col-form-label col-offset-1">模板名称</label>
              <div class="col-md-8">
                <input type="text" class="form-control rounded" />
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group row">
              <label class="col-md-3 padding-right col-form-label">采集模板</label>
              <div class="col-md-8">
                <select class="form-control">
                  <option>模板1</option>
                  <option>模板2</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group row">
              <label class="col-md-3 padding-right col-form-label">模板分类</label>
              <div class="col-md-8">
                <select class="form-control">
                  <option>资讯类型</option>
                  <option>招标类型</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="row col-md-12">
          <div class="col-md-4">
            <div class="form-group row">
              <label class="col-md-3 padding-right col-form-label col-offset-1">运行环境</label>
              <div class="col-md-8" style="padding-top: 5px;">
                <el-radio v-model="radio" label="1">测试环境</el-radio>
                <el-radio v-model="radio" label="2">正式环境</el-radio>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group row">
              <label class="col-md-3 padding-right col-form-label">IP代理池</label>
              <div class="col-md-8">
                <select class="form-control">
                  <option>代理池1</option>
                  <option>代理池2</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <form-wizard color="#5664d2">
              <tab-content title="抓取配置">
                <div class="tab-pane" id="basic-info">
                  <h4 class="card-title">第1步编辑采集规则</h4>
                  <div>
                    <img style="width:80%;" src="@/assets/images/reptile.png" alt="">
                  </div>
                </div>
              </tab-content>
              <tab-content title="存储配置">
                <div class="tab-pane" id="basic-info">
                  <h4 class="card-title">数据实例选项</h4>
                  <form>
                    <div class="row">
                      <div class="col-lg-3">
                        <div class="form-group">
                          <label for="manufacturername">实例类型</label>
                          <multiselect
                            v-model="instanceType"
                            :options="instanceTypeList"
                          ></multiselect>
                        </div>
                      </div>
                      <div class="col-lg-3">
                        <div class="form-group">
                          <label for="manufacturerbrand">数据库服务器</label>
                          <multiselect
                            v-model="databaseServer"
                            :options="databaseServerList"
                          ></multiselect>
                        </div>
                      </div>
                      <div class="col-lg-3">
                        <div class="form-group">
                          <label for="price">数据库</label>
                          <multiselect
                            v-model="database"
                            :options="databaseList"
                          ></multiselect>
                        </div>
                      </div>
                      <div class="col-lg-3">
                        <div class="form-group">
                          <label for="price">数据表</label>
                          <multiselect
                            v-model="datasheet"
                            :options="datasheetList"
                          ></multiselect>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="control-label">数据去重</label>
                          <multiselect
                            v-model="dataDeDuplication"
                            :options="dataDeDuplicationList"
                          ></multiselect>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="control-label">消息服务器</label>
                          <multiselect
                            v-model="messageServer"
                            :options="messageServerList"
                          ></multiselect>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="control-label">队列名称</label>
                          <multiselect
                            v-model="queueName"
                            :options="queueNameList"
                          ></multiselect>
                        </div>
                      </div>
                    </div>
                  </form>
                  <h4 class="card-title">数据字段配置</h4>
                  <div>
                    <div>
                      <span>列表索引</span> |
                      <span>数据详情</span> |
                      <span>移动端列表</span> |
                      <span>移动端详情</span>
                    </div>
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="ordersData"
                        :fields="fields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="currentPage"
                        :filter="filter"
                        thead-class="thead-light"
                        :filter-included-fields="filterOn"
                      >
                      </b-table>
                    </div>
                  </div>
                </div>
              </tab-content>
              <tab-content title="处理配置">
                <div class="tab-pane" id="product-img">
                  <div style="display:flex;justify-content: space-between;align-items: center;">
                    <h4 class="card-title" style="margin-bottom:0;">数据处理配置</h4>
                    <div style="display: flex;align-items:center;">
                      <div style="display: flex;margin-right: 30px;">
                        <b-form-checkbox v-model="handleSwitch" switch></b-form-checkbox>
                        <span>{{handleSwitch?'手动处理':'自动处理'}}</span>
                      </div>
                      <b-button pill variant="dark">+添加数据处理配置</b-button>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="control-label">NLP接口总线</label>
                          <multiselect
                            v-model="dataDeDuplication"
                            :options="dataDeDuplicationList"
                          ></multiselect>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="control-label">高频词接口</label>
                          <multiselect
                            v-model="messageServer"
                            :options="messageServerList"
                          ></multiselect>
                        </div>
                      </div>
                    </div>
                    <div style="display:flex;justify-content: space-between;">
                      <span>调用接口代码程序</span>
                      <span>测试结果：未测试</span>
                    </div>
                    <div class="form-group">
                      <textarea
                        v-model="interfaceCode"
                        class="form-control"
                        name="textarea"
                        rows="6"
                      ></textarea>
                    </div>
                    <div class="form-group">
                      <b-button variant="primary">开始测试</b-button>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="control-label">标签工厂接口</label>
                          <multiselect
                            v-model="dataDeDuplication"
                            :options="dataDeDuplicationList"
                          ></multiselect>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                          <label class="control-label">资讯行业标签</label>
                          <multiselect
                            v-model="messageServer"
                            :options="messageServerList"
                          ></multiselect>
                        </div>
                      </div>
                    </div>
                    <div style="display:flex;justify-content: space-between;">
                      <span>调用接口代码程序</span>
                      <span>测试结果：测试通过</span>
                    </div>
                    <div class="form-group">
                      <textarea
                        v-model="interfaceCode"
                        class="form-control"
                        name="textarea"
                        rows="6"
                      ></textarea>
                    </div>
                    <div class="form-group">
                      <b-button variant="primary">开始测试</b-button>
                    </div>
                  </div>
                </div>
              </tab-content>
              <tab-content title="集成测试">
                <div class="tab-pane" id="product-img">
                  <div style="display:flex;width: 80%;align-items: center;margin: auto;">
                    <div>
                      <el-progress :width="60" type="circle" :percentage="70"></el-progress>
                    </div>
                    <div style="width:100%;margin-left: 20px;">
                      <p style="margin-bottom:.5rem">当前集成测试进度</p>
                      <el-progress :show-text="false" :stroke-width="15" :percentage="70"></el-progress>
                    </div>
                  </div>
                  <div style="width: 80%;height:300px;line-height:300px;margin:auto;text-align:center;">
                    我是整个测试log日志信息，我有很多行，我有很多字，有字母有数字。
                  </div>
                </div>
              </tab-content>
              <tab-content title="恭喜，测试通过！">
                <div class="tab-pane" id="metadata">
                  <div style="width: 80%;height:300px;line-height:300px;margin:auto;text-align:center;">
                    恭喜，测试通过！
                  </div>
                  <div style="width: 80%;margin:auto;display:flex;justify-content:space-between;">
                    <button class="btn btn-primary">继续测试</button>
                    <button class="btn btn-primary">发布上线</button>
                  </div>
                </div>
              </tab-content>
            </form-wizard>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
import Multiselect from "vue-multiselect";

import { FormWizard, TabContent } from "vue-form-wizard";
export default {
  components: {
    Layout,
    PageHeaderNew,
    FormWizard,
    TabContent,
    Multiselect
  },
  data () {
    return {
      items: [
        {
          text: '采集管理',
          url: '/spider'
        },{
          text: '采集模板',
          url: '/spider/managementTemplate'
        },{
          text: '创建模板',
          url: '/spider/createTemplate'
        }
      ],
      radio: '1',
      instanceTypeList: ["ElasticSearch","MySQL","MongoDB"],
      instanceType: '',
      databaseServerList: ["192.168.71.52"],
      databaseServer: '',
      databaseList: ["ES_lastDB"],
      database: '',
      datasheetList: ["ES_lastTable"],
      datasheet: '',
      dataDeDuplicationList: ["bloom_infos"],
      dataDeDuplication: '',
      messageServerList: ["192.168.71.83"],
      messageServer: '',
      queueNameList: ["192.168.71.83"],
      queueName: '',
      totalRows: 1,
      currentPage: 1,
      perPage: 10,
      pageOptions: [10, 25, 50, 100],
      filter: null,
      filterOn: [],
      sortBy: "seedNum",
      sortDesc: false,
      ordersData: [
        {
          name: "title",
          outputValue: "${title}",
          dataFormat: "",
          desc: "",
        },{
          name: "publish_time",
          outputValue: "${publish_time}",
          dataFormat: "",
          desc: "",
        },{
          name: "contenthtml",
          outputValue: "",
          dataFormat: "",
          desc: "",
        },{
          name: "content",
          outputValue: "",
          dataFormat: "",
          desc: "",
        }
      ],
      fields: [
        { key: "name", label: "输入字段名称（系统加载）" },
        { key: "outputValue", label: "输出数据值（开发者配置）" },
        { key: "dataFormat", label: "字段类型（数据格式）" },
        { key: "desc", label: "字段说明" }
      ],
      handleSwitch: false,
      interfaceCode: '',
    }
  },
  mounted() {
    this.totalRows = this.ordersData.length;
  },
}
</script>
<style lang="scss" scoped>
label{
  margin-bottom: 0;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 12px;
}
.padding-right{
  padding-right: 0;
  padding-top: .2rem;
  padding-bottom: .2rem;
}
.row{
  .el-input__inner{
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
    ::v-deep .el-input__icon,::v-deep .el-range-separator{
      line-height: 1.7rem;
    }
  }
}
.newstyle{
  input,select{
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
</style>
